<!--// 멀티스킨 사용을 위해 변수 또는 ID 랜덤 지정 -->
{@$skin_id = "bxSlider_".mt_rand()}
{@$slide_id = $skin_id}

<!--// prettyPhoto 테마 -->
<!--@if(!$widget_info->ptypoto_theme)-->
{@$prettyPhoto_theme = "pp_default"}
<!--@else-->
{@$prettyPhoto_theme = $widget_info->ptypoto_theme}
<!--@end-->

<!--// 썸네일 넓이+ 테두리(2px) 출력됨 -->
{@$bxWindowWidth = $widget_info->thumbnail_width+($widget_info->thumbnail_bdsize*2)}

<!--// 슬라이드 전체 넓이 = (썸네일 넓이+ 총 갯수) + 썸네일 간격(10px) -->
{@$bxSwrapper_width = ($bxWindowWidth*$widget_info->cols_list_count)+($widget_info->cols_list_count*10)}

<!--// 슬라이드 전체 높이 = 모듈 이름 높이(20px) + 썸네일 높이 + 타이틀(35px) + 내용 높이 (80px) -->
{@$bxWindowHeight = $widget_info->thumbnail_height+($widget_info->thumbnail_bdsize*2)} <!--// 이미지 + (테두리 2px) 출력됨 -->

<!--// 모듈 이름 높이(20px) -->
<!--@if(!$widget_info->mid_height)-->
{@$bxModuleheight = 20}
<!--@else-->
{@$bxModuleheight = $widget_info->mid_height}
<!--@end-->
{@$bxWindowHeight = $bxWindowHeight+$bxModuleheight}

<!--// 제목 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->title_font_size)-->
{@$title_font_size = $widget_info->title_font_size}
<!--@else-->
{@$title_font_size = 12}
<!--@end-->

<!--@if($widget_info->title_font_color)-->
{@$title_font_color = $widget_info->title_font_color}
<!--@else-->
{@$title_font_color = '#000'}
<!--@end-->

<!--@if($widget_info->title_font_family!="Default")-->
{@$title_font_family = $widget_info->title_font_family}
<!--@else-->
{@$title_font_family = "돋움,Georgia,Times New Roman,Times,serif"}
<!--@end-->

<!--// 제목 폰트 직접 입력인 경우 -->
<!--@if($widget_info->title_font_user!="")-->
{@$title_font_family = $widget_info->title_font_user}
<!--@end-->

<!--// 제목+카테고리 높이(35px) -->
<!--@if(!$widget_info->title_height)-->
{@$textT1_Height = 35}
<!--@else-->
{@$textT1_Height = $widget_info->title_height}
<!--@end-->

<!--// 내용의 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->content_font_size)-->
{@$content_font_size = $widget_info->content_font_size}
<!--@else-->
{@$content_font_size = 11}
<!--@end-->

<!--@if($widget_info->content_font_color)-->
{@$content_font_color = $widget_info->content_font_color}
<!--@else-->
{@$content_font_color = '#000'}
<!--@end-->

<!--@if($widget_info->content_font_family!="Default")-->
{@$content_font_family = $widget_info->content_font_family}
<!--@else-->
{@$content_font_family = "돋움,Dotum,Helvetica,AppleGothic,Sans-serif"}
<!--@end-->

<!--// 내용 폰트 직접 입력인 경우 -->
<!--@if($widget_info->content_font_user!="")-->
{@$content_font_family = $widget_info->content_font_user}
<!--@end-->

<!--// 내용 높이(75px) -->
<!--@if(!$widget_info->content_height)-->
{@$textC1_Height = 75}
<!--@else-->
{@$textC1_Height = $widget_info->content_height}
<!--@end-->

<!--@if($widget_info->show_content_title=='Y')-->
	<!--@if($widget_info->show_title=='Y')-->
	{@$bxWindowHeight = $bxWindowHeight+$textT1_Height} <!--// 제목 2줄(35px) 출력됨 -->
	<!--@end-->

	<!--@if($widget_info->show_content=='Y')-->
	{@$bxWindowHeight = $bxWindowHeight+$textC1_Height} <!--// 내용 4줄(80px) 출력됨 -->
	<!--@end-->
<!--@end-->

{@$skincssimgpath = getSiteUrl()."widgets/contentslider/skins/bxSlider/images"} <!--// 배경 이미지 경로 -->

<style type="text/css">
.textT1_{$skin_id}, .textT1_{$skin_id} a, .textT1_{$skin_id} a:visited {
	color:{$title_font_color};
	font-family: {$title_font_family};
	font-size: {$title_font_size}px;
	text-decoration: none;
	height: {$textT1_Height}px;
	line-height: {$title_font_size}px;
	text-align:center;
	overflow:hidden;
	<!--@if($widget_info->show_title=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textT1_{$skin_id} a:hover, .textT1_{$skin_id} a:focus {
	text-decoration: underline;
}

.textC1_{$skin_id}, .textC1_{$skin_id} a, .textC1_{$skin_id} a:visited {
	text-align:justify;
	color:{$content_font_color};
	font-family: {$content_font_family};
	font-size: {$content_font_size}px;
	text-decoration: none;
	font-weight: normal;
	height: {$textC1_Height}px;
	<!--@if($widget_info->show_content=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textC1_{$skin_id} a:hover, .textC1_{$skin_id} a:focus {
	text-decoration: underline;
}

#bxSwrapper_{$skin_id} {
	width:{$bxSwrapper_width}px; /* 전체넓이 */
	margin:0 auto;
}

#{$slide_id} {
	padding: 0;
	margin: 0;
	list-style: none;
	overflow: hidden;
	height: {$bxWindowHeight}px; /* 전체 높이 */
}

#{$slide_id} li {
	padding: 5px;
	margin: 0;
	zoom:1;
	width: {$bxWindowWidth}px; /* 썸네일 넓이 */
}

#bxSwrapper_{$skin_id} h4 a, #bxSwrapper_{$skin_id} h4 a:hover {
	text-decoration: none;
	color: #000;
}

/* 모듈 이름 */
#bxSwrapper_{$skin_id} li h4 { 
	position:relative;
	z-index:1;
	font-size:0.95em;
	letter-spacing:-1px;
	width:{$bxWindowWidth}px;
	height:{$bxModuleheight}px;
	margin-bottom:-2px;
	font-size:12px;
	color:#2f3743;
	overflow:hidden
}

/* 이미지+제목+내용 출력부분 */
#bxSwrapper_{$skin_id} li div {
	display:block;
	width:{$bxWindowWidth}px;
	height:{$bxWindowHeight}px;
	color:#6b6d70;
	overflow:hidden;
	z-index:1;
	letter-spacing:-1px;
}

/* 이미지 출력부분 */
#bxSwrapper_{$skin_id} .bxImage_{$skin_id} {
	float: left;
	margin-right: 0px;
	border: {$widget_info->thumbnail_bdsize}px solid {$widget_info->thumbnail_bdcolor};	/* 썸네일 테투리 두께와 색 지정 */
	width:{$widget_info->thumbnail_width}px; /* important */
	height:{$widget_info->thumbnail_height}px; /* important */
}

/* 제목+카테고리 출력부분 */
#bxSwrapper_{$skin_id} .bxTitle_{$skin_id} {
	position:relative;
	width:{$bxWindowWidth}px;
	height:{$textT1_Height}px;
	margin-bottom:-5px;
	text-align:center;
	overflow:hidden;
	clear:both; /* important */
}

/* 내용 출력부분 */
#bxSwrapper_{$skin_id} .bxContent_{$skin_id} {
	line-height: 1.5em;
	width:{$bxWindowWidth}px;
	height:{$textC1_Height}px;
	overflow:hidden;
}

/* gray, blue, green, orange, purple, red, yellow */
/*next button*/
#bxSwrapper_{$skin_id} .bx-next {
	position:absolute;
	top:40%; /* 좌우 컨트롤 버튼 높이 */
	right:-40px; /* 좌우 컨트롤 버튼 간격 */
	z-index:999;
	width: 30px;
	height: 30px;
	text-indent: -999999px;
	background: url('{$skincssimgpath}/gray_next.png') no-repeat 0 -30px;
}

/*previous button*/
#bxSwrapper_{$skin_id} .bx-prev {
	position:absolute;
	top:40%; /* 좌우 컨트롤 버튼 높이 */
	left:-40px; /* 좌우 컨트롤 버튼 간격 */
	z-index:999;
	width: 30px;
	height: 30px;
	text-indent: -999999px;
	background: url('{$skincssimgpath}/gray_prev.png') no-repeat 0 -30px;
}

/*pager links*/
#bxSwrapper_{$skin_id} .bx-pager a {
	margin-right: 5px;
	color: #fff;
	padding: 3px 8px 3px 6px;
	font-size: 12px;
	zoom:1;
	background: url('{$skincssimgpath}/gray_pager.png') no-repeat 0 -20px;
}

/*auto start button*/
#bxSwrapper_{$skin_id} .bx-auto .start {
	background: url('{$skincssimgpath}/gray_auto.png') no-repeat 0 2px;
	padding-left: 13px;
}

/*auto stop button*/
#bxSwrapper_{$skin_id} .bx-auto .stop {
	background: url('{$skincssimgpath}/gray_auto.png') no-repeat 0 -14px;
	padding-left: 13px;
}

/*
 * End color scheme styles
 */


/*next/prev button hover state*/
#bxSwrapper_{$skin_id} .bx-next:hover,
#bxSwrapper_{$skin_id} .bx-prev:hover {
	background-position: 0 0;
}

/*pager links hover and active states*/
#bxSwrapper_{$skin_id} .bx-pager .pager-active,
#bxSwrapper_{$skin_id} .bx-pager a:hover {
	background-position: 0 0;
}

/*pager wrapper*/
#bxSwrapper_{$skin_id} .bx-pager {
	text-align:center;
	padding-top: 7px;
	font-size:12px;
	color:#666;
}

/*captions*/
#bxSwrapper_{$skin_id} .bx-captions {
	text-align:center;
	font-size: 12px;
	padding: 7px 0;
	color: #666;
}

/*auto controls*/
#bxSwrapper_{$skin_id} .bx-auto {
	text-align: center;
	padding-top: 15px;
}

#bxSwrapper_{$skin_id} .bx-auto a {
	color: #666;
	font-size: 12px;
}

#bxSwrapper_{$skin_id} .lightbox_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	background:url('{$skincssimgpath}/magnify.png') no-repeat center center;
}

#bxSwrapper_{$skin_id} .lightbox_video {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	background:url('{$skincssimgpath}/video.png') no-repeat center center;
}

#bxSwrapper_{$skin_id} .no_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	background:url('{$skincssimgpath}/no_image.png') no-repeat center center;
}

#bxSwrapper_{$skin_id} .open_doc {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	background:url('{$skincssimgpath}/document.png') no-repeat center center;
}

</style>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#{$slide_id}').bxSlider({
			auto: {$widget_info->slide_auto},
            autoHover: true,
			infiniteLoop: true,
			bxMaxHeight: {$bxWindowHeight},
            controls: <!--@if($widget_info->show_control=='Y')-->true<!--@else-->false<!--@end-->,
			pause: {$widget_info->slide_delay},
			displaySlideQty: {$widget_info->cols_list_count},
			moveSlideQty: {$widget_info->cols_list_count}
		});
<!--@if($widget_info->open_article!='N'||$widget_info->target_ext_var=='link'||$widget_info->target_ext_var=='image')-->
	if ($.browser.msie && $.browser.version < 7) return; // Don't execute code if it's IE6 or below cause it doesn't support it.
	$(".fade").fadeTo(1, 1);
	$(".fade").hover(function () {
		$(this).fadeTo("fast", 0.33);
	}, function () {
		$(this).fadeTo("slow", 1);
	});
	$("#{$slide_id}").find("a[rel^='prettyPhoto']").prettyPhoto({theme:'{$prettyPhoto_theme}'});

	$("a[rel^='prettyPhoto']").each(function() {
		var $image = jQuery(this).contents("img");
		$newclass = 'no_image';
		if($(this).attr('href').toLowerCase().match(/youtube\.com\/watch/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/vimeo\.com/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(mov|swf)/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(jpg|gif|jpeg|png)/i)) $newclass = 'lightbox_image';
		else $(this).removeClass("fade");
		var $padding_x = parseInt($image.css('padding-left')) + parseInt($image.css('padding-right')),
			$padding_y = parseInt($image.css('padding-top')) + parseInt($image.css('padding-bottom')),
			$margin_x = parseInt($image.css('margin-left')) + parseInt($image.css('margin-right')),
			$margin_y = parseInt($image.css('margin-top')) + parseInt($image.css('margin-bottom')),
			$border_x = parseInt($image.css('border-left-width')) + parseInt($image.css('border-right-width')),
			$border_y = parseInt($image.css('border-top-width')) + parseInt($image.css('border-bottom-width'));
		$height = parseInt($image.height()) + $margin_x + $padding_x + $border_x;
		$width = parseInt($image.width()) + $margin_y +  $padding_y + $border_y;
		$pos =  $image.position();
		$(this).addClass($newclass).css({height:$height, width:$width, top:$pos.top, left:$pos.left});
	});
<!--@end-->
	});
</script>

<!--@if($widget_info->content_items_shuffle=='Y')-->
{@shuffle($widget_info->content_items)}
<!--@end-->

<div id="bxSwrapper_{$skin_id}">
<ul id="{$slide_id}">
<!--@foreach($widget_info->content_items as $key => $item)-->
	<li>
	<!--@if($bxModuleheight>0)-->
	<h4><a href="{getSiteUrl($content_items[0]->domain, '', 'mid', $content_items[0]->get('mid'))}">{$item->getBrowserTitle()}</a></h4>
	<!--@end-->
	<div class="bxArticle_{$skin_id}">
	<!--@if($item->getThumbnail())-->
		<div class="bxImage_{$skin_id}">
		<!--@if($widget_info->open_article=='Z')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getPreview()}" rel='prettyPhoto' />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@elseif($widget_info->open_article=='Y')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@else-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@end-->
		<!--@else-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto' />
			<!--@elseif($item->getThumbnail())-->
			<a />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@end-->
		<img src="{$item->getImgslider()}" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" title='{$item->getTitle($widget_info->subject_cut_size)}' class="<!--@if($widget_info->img_fade=='Y'&&$widget_info->open_article!='N')-->fade<!--@end-->" />
		</a><br>
		</div>
	<!--@end-->
	<!--@if($widget_info->show_content_title=='Y')-->
		<p class="bxTitle_{$skin_id} textT1_{$skin_id}">
		<strong><a href="{$item->getLink()}">{$item->getTitle($widget_info->subject_cut_size)}</a><br></strong>
			<!--@if($item->getCategory())-->
			<a href="{getSiteUrl($item->domain,'','mid',$item->get('mid'),'category',$item->get('category_srl'))}">{$item->getCategory()}</a><br>
			<!--@end-->
		</p>
		<span class="bxContent_{$skin_id} textC1_{$skin_id}"><a href="{$item->getLink()}">{$item->getContent($widget_info->content_cut_size)}</a></span>
	<!--@end-->
	</div>
	</li>
<!--@end-->
</ul>
</div>
